<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI VTuber - Live2D 渲染器（离线版）</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
        
        body {
            background-color: #00FF00;
            font-family: 'Microsoft YaHei', sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        
        #status {
            position: absolute;
            top: 20px;
            left: 20px;
            color: white;
            background: rgba(0, 0, 0, 0.8);
            padding: 15px 20px;
            border-radius: 10px;
            font-size: 16px;
            z-index: 1000;
            max-width: 400px;
        }
        
        .status-ok { color: #00ff00; }
        .status-error { color: #ff0000; }
        .status-warning { color: #ffff00; }
        
        #info {
            position: absolute;
            bottom: 20px;
            left: 20px;
            color: white;
            background: rgba(0, 0, 0, 0.8);
            padding: 15px 20px;
            border-radius: 10px;
            font-size: 14px;
            z-index: 1000;
        }
        
        #model-container {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        #model-image {
            max-width: 80%;
            max-height: 80%;
            object-fit: contain;
            filter: drop-shadow(0 10px 30px rgba(0,0,0,0.3));
        }
    </style>
</head>
<body>
    <div id="status">
        <div class="status-warning">⚠ 正在使用简化渲染模式</div>
        <div style="margin-top: 10px; font-size: 12px; color: #ccc;">
            由于网络限制，Live2D 库无法加载<br>
            显示静态模型图片作为替代
        </div>
    </div>
    
    <div id="info">
        <div><span class="status-ok">✓</span> WebSocket: <span id="ws-status">连接中...</span></div>
        <div><span class="status-ok">✓</span> 模型: 桃濑日和</div>
        <div><span class="status-ok">✓</span> 情感: <span id="emotion">neutral</span></div>
        <div><span class="status-ok">✓</span> 口型: <span id="mouth">0.0</span></div>
    </div>
    
    <div id="model-container">
        <!-- 显示模型的预览图 -->
        <img id="model-image" src="/models/hiyori/runtime/hiyori_free_t08.2048/texture_00.png" alt="Hiyori Live2D Model">
    </div>
    
    <script>
        // WebSocket 连接
        const WS_URL = 'ws://localhost:8765';
        let ws;
        let reconnectTimer;
        
        const wsStatusEl = document.getElementById('ws-status');
        const emotionEl = document.getElementById('emotion');
        const mouthEl = document.getElementById('mouth');
        const modelImage = document.getElementById('model-image');
        
        function connectWebSocket() {
            try {
                ws = new WebSocket(WS_URL);
                
                ws.onopen = () => {
                    wsStatusEl.innerHTML = '<span class="status-ok">已连接</span>';
                    clearTimeout(reconnectTimer);
                };
                
                ws.onmessage = (event) => {
                    try {
                        const data = JSON.parse(event.data);
                        
                        if (data.type === 'update_params') {
                            const params = data.params;
                            
                            // 更新显示
                            if (params.emotion) {
                                emotionEl.textContent = params.emotion;
                                // 根据情感改变图片滤镜效果
                                updateEmotion(params.emotion);
                            }
                            
                            if (params.mouthOpen !== undefined) {
                                mouthEl.textContent = params.mouthOpen.toFixed(2);
                                // 根据口型改变图片大小（模拟说话）
                                updateMouth(params.mouthOpen);
                            }
                        }
                        
                    } catch (error) {
                        console.error('消息解析错误:', error);
                    }
                };
                
                ws.onerror = () => {
                    wsStatusEl.innerHTML = '<span class="status-error">连接失败</span>';
                };
                
                ws.onclose = () => {
                    wsStatusEl.innerHTML = '<span class="status-warning">已断开</span>';
                    reconnectTimer = setTimeout(connectWebSocket, 5000);
                };
                
            } catch (error) {
                wsStatusEl.innerHTML = '<span class="status-error">错误</span>';
                reconnectTimer = setTimeout(connectWebSocket, 5000);
            }
        }
        
        // 根据情感更新显示效果
        function updateEmotion(emotion) {
            const filters = {
                'happy': 'brightness(1.2) saturate(1.3)',
                'sad': 'brightness(0.8) saturate(0.7)',
                'surprised': 'brightness(1.3) contrast(1.2)',
                'excited': 'brightness(1.3) saturate(1.5) hue-rotate(10deg)',
                'neutral': 'brightness(1) saturate(1)',
                'confused': 'brightness(0.9) hue-rotate(-10deg)'
            };
            
            const filter = filters[emotion] || filters['neutral'];
            modelImage.style.filter = `drop-shadow(0 10px 30px rgba(0,0,0,0.3)) ${filter}`;
        }
        
        // 根据口型更新显示效果
        let baseScale = 1;
        function updateMouth(mouthOpen) {
            // 根据嘴巴张度微调图片大小（模拟呼吸和说话）
            const scale = 1 + (mouthOpen * 0.02);
            modelImage.style.transform = `scale(${scale}) translateY(${-mouthOpen * 3}px)`;
        }
        
        // 添加呼吸动画
        let breathPhase = 0;
        setInterval(() => {
            breathPhase += 0.05;
            const breathScale = Math.sin(breathPhase) * 0.01;
            const currentTransform = modelImage.style.transform || 'scale(1)';
            
            // 如果没有说话，添加呼吸效果
            if (parseFloat(mouthEl.textContent) < 0.1) {
                modelImage.style.transform = `scale(${1 + breathScale}) translateY(${Math.sin(breathPhase) * 2}px)`;
            }
        }, 100);
        
        // 启动 WebSocket 连接
        connectWebSocket();
        
        // 图片加载失败时的处理
        modelImage.onerror = () => {
            modelImage.style.display = 'none';
            document.getElementById('status').innerHTML = `
                <div class="status-error">✗ 模型图片加载失败</div>
                <div style="margin-top: 10px; font-size: 12px; color: #ccc;">
                    请确保模型文件位于正确位置：<br>
                    models/hiyori/runtime/hiyori_free_t08.2048/texture_00.png
                </div>
            `;
        };
        
        modelImage.onload = () => {
            console.log('✓ 模型图片加载成功');
        };
    </script>
</body>
</html>
